<template>
    <div class="swiper">
        <swiper
        :indicator-dots="true"
        indicator-color="#EA5149"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        :circular="true"
        >
            <div v-for="(top, imgindex) in imageList" :key="imgindex">
                <swiper-item>
                    <image
                    v-for="img in top"
                    :key="img.id"
                    :src="img.image" 
                    mode="aspectFit" 
                    class="slide-image" 
                    @click="bookGoTO(img)"
                    ></image>
                </swiper-item>
            </div>
        </swiper>
    </div>
</template>

<script>
import {chunk} from '@/utils'
export default {
    props:['topList'],
    computed: {
        imageList () {
            return chunk(this.topList, 3)
        }
    },
    methods: {
        bookGoTO (data) {
            wx.navigateTo({
                url: `/pages/details/main?id=${data.id}`
            })
        }
    }
}
</script>

<style>
.swiper {
    margin-top: 5px;
}
.slide-image {
    width: 33%;
    height: 250rpx;
}
</style>
